<template>
  <div>
    <!-- app数据管理 用户分析 -->
    <el-row
      type="flex"
      class="row-bg"
      justify="end">
      <el-select
        v-model="searchParams.history"
        placeholder="请选择">
        <el-option
          v-for="item in selectOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-date-picker
        v-model="value"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      />
      <el-button
        type="primary"
        @click="handleSearch">搜索</el-button>
    </el-row>
    <el-row
      type="flex"
      justify="end"
      align="middle"
      style="height: 60px;margin-right: 40px;">
      <el-button
        type="primary"
        @click="download">下载Excel</el-button>
    </el-row>
    <el-row>
      <common-table
        ref="table"
        :table-head="[ { label:'日期', prop:'date_scan'}, { label:'数量', prop: 'num'}, { label: '下载人员', prop: 'userList' } ]"
        :search-params="searchParams"
        url="/snbind/ssnmes/group_page"
        title="sn绑定："
        @callback="verify"
      />
    </el-row>
  </div>

</template>

<script>
// import axios from 'axios'
import CommonTable from '../components/CommonTable'
import { mapState } from 'vuex'
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 8)
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
export default {
  name: 'Tab',
  components: { CommonTable },
  data () {
    return {
      searchParams: {
        start_date: start,
        end_date: end,
        history: 0
      },
      selectOptions: [
        {
          value: 0,
          label: '未下载'
        },
        {
          value: 1,
          label: '已下载'
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value: [start, end],
      dates: []
    }
  },
  computed: mapState({
    userStatisticData: state => state.app.userStatisticData
  }),
  watch: {
    value: {
      handler: function (val) {
        if (val) {
          const [a, b] = val
          this.searchParams = Object.assign({}, this.searchParams, { start_date: a, end_date: b })
        }
      },
      immediate: true
    }
  },
  mounted () {
  },
  methods: {
    handleSearch () {
      this.$refs.table.handleSearch()
    },
    verify (event) {
      let { multipleSelection } = event
      this.dates = multipleSelection.map(function (item) {
        return item.date_scan
      })
    },
    async download () {
      if (!this.dates.length) {
        this.$notify({
          title: '提示',
          message: '请选择日期',
          type: 'warning'
        })
        return
      }

      let selectDate = this.dates.join(',')
      let params = {
        token: '05a888bd6d2bec1fae72fbe72583ad5e',
        select_date: selectDate
      }
      // let a = await this.$http.get('/snbind/ssnmes/check', { param })
      // console.dir(a)
      // window.open(`/cloud-platform?select_date=${selectDate}`)
      params = Object.assign({}, params, { contentType: 'application/x-zip-compressed;charset=utf-8', responseType: 'arraybuffer' })
      this.$http.get('/snbind/ssnmes/export', { params }).then((res) => {
        let blob = new Blob([res.data], { type: 'application/x-zip-compressed;charset=utf-8' })
        console.log(res.headers['filename'])
        let objectUrl = URL.createObjectURL(blob)
        window.location.href = objectUrl
      })
      // axios({
      //   method: 'get',
      //   url: 'http://101.37.158.109/cloud-platform/snbind/ssnmes/export',
      //   params,
      //   responseType: 'arraybuffer',
      //   headers: {
      //     'Content-Type': 'application/x-zip-compressed;charset=utf-8'
      //   }
      // }).then((response) => {
      //   console.log(response.headers)
      // })
    }
  }
}
</script>

<style scoped>
  .tab-container {
    margin: 30px;
  }
</style>
